页面加载过程中触发的事件汇总

页面加载过程 DOMContentLoaded，readystatechange，load 事件触发时机 以及 和 script 标签设置 defer，async，和默认不设置的关联关系 。下面用代码示例介绍触发过程。下面先介绍各个属性的功能细节。

1）script中添加 defer 属性：脚本的加载过程和HTML加载是异步发生的，不会阻塞DOM树构建，等到HTML解析完，脚本才开始执行。对内嵌脚本无效，在 DOMContentLoaded 事件前 执行，如果多个script标签设置了defer属性，这几个script的执行顺序和声明顺序相同，最前面的先执行，并不是谁先下载先执行。简而言之就是 “异步下载，待HTML解析完执行”。

2）script中添加 async 属性：脚本的加载过程和HTML加载也是异步发生的。但是脚本下载完成后会停止 HTML 解析，执行脚本，脚本解析完继续 HTML 解析。对内嵌脚本无效。 一般适合与执行顺序无关的脚本，比如广告，埋点脚本，网站流量分析等。简而言之就是 “下载完就立即执行”

3）动态创建的script，默认async=true，一旦下载就执行，如果创建的是多个有依赖关系的脚本，设置为 async=false，不过无法做到比HTML中非动态的脚本更早执行。

4）script默认加载：当 script 标签两个属性都不设置时，表示同步下载，如果在Head标签中设置同步下载的script，会阻塞 HTML的DOM构建，会阻止后面元素的渲染，包括body元素，如果执行太久，会导致页面长时间空白。

注意： 当script标签同时拥有 defer 和 async 时，执行效果和 async 一样，

5）DOMContentLoaded 事件：一般由 document 添加监听，当初始的 HTML 文档被完全加载和解析完成之后，该事件就触发，而无需等待样式表，图像和子框架的完全加载。在触发这个事件前，defer 属性的脚本或者同步加载的脚本 还是要执行完才会触发这个事件。此时  document.readyState 状态为 'interactive' 。

6）readystatechange 事件：一般由 document 添加监听，document 有 readyState 属性来描述 document 的 loading 状态，readyState的改变会触发 readystatechange 事件，有如下几个状态

7）load 事件：一般由 window 添加监听，当一个资源及其依赖的资源结束加载时触发。从这里可以看到需要等待依赖资源的结束加载。

8）beforeunload 事件：一般由 window 添加监听，当浏览器窗口，文档或其资源将要卸载时，会触发beforeunload事件。这个文档是依然可见的，并且这个事件在这一刻是可以取消的。如果处理函数为Event对象的returnValue属性赋值非空字符串，浏览器会弹出一个对话框，来询问用户是否确定要离开当前页面，没有赋值时，该事件不做任何响应，只会弹一次，刷新页面也会弹，这一次也算。

注意：html5中指出，该事件中调用window.alert(), window.confirm(), and window.prompt()方法将会被忽略，并且大多数浏览器针对弹出框的内容无法做自定义，系统默认。

9）unload 事件：当文档或者一个子资源将要被卸载时，在beforeunload 、pagehide两个事件之后触发，文档会处于一个特定状态。

10）pageshow事件：事件源为document (dispatched on Window)，也就是说需由window触发。当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)。其中属性 persisted 可以用来判断页面是否来自缓存。

11）pagehide事件：事件源为document (dispatched on Window)，也就是说需由window触发。当会话历史记录页面隐藏时，例如后退，当前页面在显示后退之后的页面时，会收到一个pagehide事件，对于浏览器缓存了的那种页面，需要特定的逻辑时可以在该处实现。该事件在 beforeunload 之后unload之前执行。

备注：pageshow, pagehide 主要是那种前进后退将页面缓存起来的浏览器使用居多，因为此时缓存之后不会触发 load事件

总结：以上事件触发先后顺序便是，首先 document.readyState 为 loading 状态，然后触发 interactive 状态，然后触DOMContentLoaded 事件，之后 document.readyState 变为 complete 状态，然后触发 load 事件，然后 pageshow 事件触发。

defer 脚本，不管在 head 标签之中还是在末尾，执行总是在 DOMContentLoaded 事件之后。async 脚本可能在任何位置执行，下载完便执行。

本文参考至页面加载过程中事件